<template>
    <div class="formd">
        <div class="question">
            <el-form>
                <el-form-item v-for="(parent_subject,index) in subject" name="parent_subject.number"
                    :key=parent_subject.number>
                    <!-- <el-form-item name="subject1"></el-form-item> -->
                    <!-- 题目 -->
                    <div class="test_box">
                        <div class="ques">{{parent_subject.number}}、 {{parent_subject.ques}}</div>
                    </div>
                    <!-- 单选题选项 -->
                    <el-checkbox-group id='selection' v-model="user.radio[index]">
                        <el-checkbox-button id='item' :label=option.label v-for="option in parent_subject.options"
                            :key='option.label'>
                            <div class="icon">
                                <img v-if="checked(option.label,index)? 0:1" src="../assets/Oval@2x.png" alt="">
                                <img v-else src="../assets/选中@2x.png" alt="">
                            </div>
                            {{option.label}}、 {{option.text}}
                            <br>
                        </el-checkbox-button>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <router-link to="/result">
                        <el-button id='submit' @click="to_submit">submit</el-button>
                    </router-link>

                </el-form-item>
            </el-form>

        </div>

    </div>

</template>
<script>
    import axios from 'axios'
    export default {
        data() {
            return {
                subject: '',
                test_num: '', //题目总数
                //用户作答结果
                subject_ans: [], //题目答案
                user: {
                    radio: [
                        []
                    ],
                    score: '',
                    num: '', //回答正确的题目数
                    detail: [] //答题对错情况
                },
                user_list: []

            };
        },
        created: function () {
            axios.get('http://localhost:3000/parent_subject_list').then((data) => {
                this.subject = data.data.subject
                this.test_num = data.data.test_num
                this.init()
                // console.log(this.info);
                console.log(data.data);
                // console.log(typeof(this.test_num));
                // console.log(data.data);
            }).catch(err => {
                console.error(err);
            })

            axios.get('http://localhost:3000/subject_answers').then((data) => {
                this.subject_ans = data.data
                // console.log('subject_answers: ');
                // console.log(this.subject_ans);
            }).catch(err => {
                console.error(err);
            })

            axios.get('http://localhost:3000/users').then((data) => {
                this.user_list = data.data
                console.log('this.user_list: ');
                console.log(Object.keys(this.user_list));
            }).catch(err => {
                console.error(err);
            })
        },
        methods: {
            init() {
                this.user.radio = [
                    []
                ]
                for (let j = 0; j < this.test_num; j++) {
                    this.user.radio[j] = []
                }
            },
            checked(value, index) {
                for (let i in this.user.radio[index]) {
                    // console.log(index);
                    if (this.user.radio[index][i] === value) {
                        return 1;
                    }

                }
                return 0;
            },
            to_submit() {
                this.calculate()
                let objStr = JSON.stringify(this.user)
                sessionStorage.setItem('result', [objStr])
                let name = sessionStorage.getItem('user_name')
                axios({
                        method: 'post',
                        url: 'http://localhost:3000/users',
                        data: {

                            [name]: this.user
                        }

                    })
                    .then(data => {
                        console.log(data);
                    })
                    .catch(err => {
                        console.log(err);
                    })

                //     axios({
                //             method: 'post',
                //             url: 'http://localhost:3000/final_result',
                //             data: JSON.stringify(final)
                //         })
                //         .then(data => {
                //             console.log(data);
                //         })
                //         .catch(err => {
                //             console.log(err);
                //         })
            },

            calculate() {
                let score_sum = 0
                let num = 0
                for (let i = 0; i < this.test_num; i++) {
                    let sans_item = this.subject_ans[i]
                    let index = sans_item.number
                    let flag1 = 0
                    if (sans_item.ans.length !== this.user.radio[index - 1].length) {
                        // console.log('sans_item.ans.length' + sans_item.ans.length);
                        // console.log('this.radio[index - 1].length' + this.radio[index - 1].length);
                        flag1 = 1
                    } else {
                        for (let j = 0; j < sans_item.ans.length; j++) {
                            let sans = sans_item.ans[j]
                            let flag = 0;
                            // 遍历用户的答案，若答案中包含对应的sans，则删除对应的元素                                         
                            // 若没有，则改变说明该题作答错误

                            for (let x = 0; x < this.user.radio[index - 1].length; x++) {
                                // console.log('this.radio: ' + this.radio[index - 1].length);
                                let uans = this.user.radio[index - 1]
                                if (sans === uans[x]) {
                                    flag = 1;
                                    break;
                                }
                            }
                            if (flag === 0) {
                                flag1 = 1
                                break;
                            }
                        }
                    }
                    //若flag1 为1 说明本题用户回答错误
                    //若flag1为0 说明回答正确，num++，score+10
                    if (flag1 === 1) {
                        this.user.detail[i] = 0
                        continue
                    } else if (flag1 === 0) {
                        this.user.detail[i] = 1
                        num++
                        score_sum = score_sum + 10
                    }
                }
                this.user.score = score_sum
                this.user.num = num
                // console.log('calculate: ' + this.score);
                // console.log('calculate: ' + this.num);
                return
            }
        }
    }
</script>

<style>
    .question #selection {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .question #selection #item {
        margin: 20px;
        display: flex;
        flex-direction: row;


    }

    .question #selection #item .el-checkbox-button__inner {
        width: 600px;
        height: 80px;
        text-align: left;
        line-height: 70px;
    }

    .question #selection #item .el-checkbox-button__original {
        display: none;
    }

    .question #selection #item .icon {
        float: left;
    }

    .ques {
        text-align: left;
    }

    .question #submit {
        /* border-radius: 70px; */
        background-color: rgb(247, 97, 108);
        width: 600px;
        height: 70px;
    }
</style>